/*
 * @Description: eCharts显示
 * @Author: Zzt
 * @Date: 2022-11-10 15:22:19
 * @LastEditTime: 2022-12-19 19:48:09
 */

import BarCharts from '@/components/echarts/BarChart';
import PieChart from '@/components/echarts/PieChart';
import { Segmented } from 'antd';
import { useEffect, useMemo, useState } from 'react';
import { useBasicsVisualizationContext } from '../contexts/BasicsVisualizationContext';
const Charts = (props: any) => {
  const { data } = props;
  const { xData, yData } = data;
  const [pieData, setPieData] = useState([]);

  const { chartType, xdata, ydata, setXData, setYData } = useBasicsVisualizationContext();
  useEffect(() => {
    setXData(yData);
    setYData(xData);
  }, [data]);
  useEffect(() => {
    const data = [];
    if (xdata) {
      for (let i = 0; i < xdata.length; i++) {
        data.push({ value: xdata[i], name: ydata[i] });
      }
      setPieData(data);
    }
  }, [xdata, ydata, data]);
  return (
    <>
      {useMemo(() => chartType === 1 && <PieChart data={pieData} />, [pieData, chartType])}
      {useMemo(
        () => chartType === 2 && <BarCharts xdata={xdata} ydata={ydata} type={'bar'} />,
        [xdata, ydata, chartType]
      )}
      {useMemo(
        () => chartType === 3 && <BarCharts xdata={xdata} ydata={ydata} type={'line'} />,
        [xdata, ydata, chartType]
      )}
    </>
  );
};
export default Charts;
